Embedded Widgets Overview
Developers can seamlessly embed the Qrvey platform’s functionalities (such as web form builders, data visualizations, and more) directly into their frontend applications using a comprehensive suite of customizable “widgets”.
How to Embed a Widget
- Navigate to the Qrvey Composer interface you'd like to embed.
- Click the
</>
Embed Widget Options button on the right in the top bar. A modal will appear containing:- The widget's HTML tag.
- An HTML Script tag containing the widget's JSON config object.
- An HTML script tag to launch the widget.
- Click Copy and then close the widget.
- Place the code in your frontend application as desired.
- Set configuration and authentication on the widget's JSON object as desired.
Refresh your frontend application and your widget should now be visible in the UI.
Anatomy of a Widget
The widget's code snippet that you copied from Qrvey composer consists of an HTML Tag and two scripts.
<!-- widget's tag -->
<qrvey-WIDGET-TYPE settings="config"></qrvey-WIDGET-TYPE>
<!-- widget's Config Object -->
<script>
var config = {
"api_key": "<YOUR_PRIVATE_API_KEY>",
"domain": "https://documentation-demos.qrvey.com",
"user_id": "OIJFsiS4-",
"app_id": "fQiu0ogde"
};
</script>
<!-- widget's launcher -->
<script type="text/javascript" src="https://demo.qrvey.com/widgets-launcher/app.js"></script>
Widgets
Each widget has its own set of configuration options. Please browse the following sections to find details about each type of widget.
Widget | Description |
---|---|
Single Panel | Embeds a single chart, map, or metric. |
Dashboard View | Embeds a dashboard containing charts, maps, and metrics. |
Dashboard Builder | Enables end users to build custom charts and dashboards. |
Analytic Suite | Enables end-users to build custom charts. |
Web Form Design | Enables end users to create and publish their own web forms. |
Web Form (End User) | Embeds an existing web form (form, survey, or quiz), in which end users can enter data. |
Analytic Suite | Enables end-users to perform their own analysis of their data by embedding a Summary, Tabular, or Custom Analysis view. |
Pixel-perfect Reports | Embeds a Pixel-perfect report. |
Automation | Embeds workflow functionality into your application. |
Download Manager | Enables end-users to access Download Manager to manage exported files. |
Additional Tooling
The Qrvey Platform also provides a comprehensive REST API. For more information, see Overview of Qrvey API.